<template>
	<view class="index-page bgimg1 px-2 status-bar-height">
		<!--header-->
		<view class="flex align-center justify-between py-2">
			<image src="/static/imgs/logo_top.png" mode="widthFix" style="width: 440rpx;height: 54rpx;"></image>
			<view class="flex align-center">
				<image class="mr-4" src="/static/imgs/search.png" mode="aspectFill" style="width: 48rpx;height: 48rpx;"
					@tap="navTo('/pages/search/search')"></image>
				<image src="/static/imgs/rank_top.png" mode="aspectFill" style="width: 48rpx;height: 48rpx;"
					@tap="navTo('/pages/rank/rank')"></image>
			</view>
		</view>
		<!--banner-->
		<u-swiper class="index-swiper" height="300rpx" radius="20rpx" bgColor="#D5EDF8" keyName="image" :indicator="false"
			circular indicatorMode="dot" :indicatorStyle="{'right':'100rpx','bottom':'50rpx'}"
			indicatorInactiveColor="#526B90" indicatorActiveColor="rgba(90, 242, 146, 1)" :list="swiperList"
			@click="clickBanner" :autoplay="false" duration="1000" interval="5000">
		</u-swiper>
		<!--appname-->
		<view class="app-name-adv rounded-lg my-2 flex justify-center align-center position-relative"
			@tap="switchShow = true">
			<text class="fs-40 font-weight-bold text-white letter-spacing">{{club.name || ''}}</text>
			<image src="/static/imgs/qiehuan.png" mode="aspectFill"
				class="w-40 h-40 position-absolute right-0 top-0 mt-2 mr-2"></image>
		</view>

		<view class="flex align-center justify-between">
			<image :src="`/static/imgs/interestservice_${lang}.png`" mode="aspectFill" style="width: 330rpx;height: 156rpx;"
				@tap="navTo('/pages/interestService/interestService')"></image>
			<image :src="`/static/imgs/quickmatch_${lang}.png`" mode="aspectFill" style="width: 330rpx;height: 156rpx;"
				@tap="navTo('/pages/quickmatch/quickmatch')"></image>
		</view>

		<view class="flex align-center justify-between mt-4 mb-3" @tap="navTo('/pages/players/players')">
			<text class="fs-36 text-black font-weight-bold">{{$t('hhh.t1')}}</text>
			<image src="/static/imgs/right_icon.png" mode="aspectFill" style="width: 32rpx;height: 32rpx;"></image>
		</view>

		<view>
			<block v-for="(item,index) in dataList" :key="index">
				<cardItemVue :item="item"></cardItemVue>
			</block>
			<nodata v-if="dataList.length === 0"></nodata>
		</view>


		<u-popup :show="switchShow" :round="10" mode="center" @open="open">
			<view class="pb-4 position-relative" style="width: 558rpx;">
				<view class="text-black fs-32 font-weight-bold text-center py-3">{{$t('hhh.t2')}}</view>
				<view class="p-2 mb-2">
					<view class="flex align-center justify-between bgF6F7F9 rounded-lg p-2 mb-2" v-for="(item,index) in clubList"
						:key="index" @tap="changeClub(item)">
						<text class="text-black fs-32 font-weight-light">{{item.name}}</text>
						<text class="w-32 h-32  check" :class="clubIndex === item.id?'checked':''"></text>
					</view>
				</view>
				<view class="flex align-center justify-center donebtn mx-auto text-white fs-28 font-weight-bold mx-2"
					@tap="selectStudio">
					{{$t('hhh.t3')}}
				</view>

				<image class="position-absolute closeicon" src="/static/imgs/close.png" mode="aspectFill"
					@tap="switchShow = false"></image>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import HttpApi from '@/api/httpApi';
	import cardItemVue from './components/card-item.vue'
	export default {
		components: {
			cardItemVue
		},
		data() {
			return {
				switchShow: false,
				swiperList: [],
				page: 1,
				dataList: [],
				tempList: [],
				clubList: [],
				clubIndex: 0,
				club: {},
				lang: 'en'
			}
		},
		onLoad() {
			this.bannerList()
		},
		onShow() {
			this.lang = uni.getStorageSync('hhh-lang') || 'en'
			this.getLang()
			this.clubGetList()
		},
		onReachBottom() {
			if (this.tempList.length < 20) return
			this.page++
			this.playerPopular()
		},
		methods: {
			bannerList() {
				HttpApi.bannerList().then(res => {
					if (res.code === 1) {
						this.swiperList = res.data.list
					}
				})
			},
			selectStudio() {
				HttpApi.clubSetDefault({
					club_id: this.clubIndex
				}).then(res => {
					if (res.code === 1) {
						this.switchShow = false
						uni.$tools.toast(this.$t('hhh.t73'))
						this.clubGetList()
					}
				})
			},
			changeClub(item) {
				this.clubIndex = item.id
			},
			clubGetList() {
				HttpApi.clubGetList().then(res => {
					if (res.code === 1) {
						this.clubList = res.data.list
						if (!this.clubList.length) return
						const obj = this.clubList.find(i => i.is_default === 1)
						if (obj) {
							this.club = obj
							this.clubIndex = this.club.id
							uni.setStorageSync('club_id', this.clubIndex)
							this.playerPopular()
						}
					}
				})
			},
			clickBanner(index) {
				const item = this.swiperList[index]
				if (!item.link_url) return
				window.open(item.link_url)
			},
			playerPopular() {
				HttpApi.playerPopular({
					page: this.page,
					limit: 20
				}).then(res => {
					if (res.code === 1) {
						const list = res.data.list || []
						this.tempList = list
						if (this.page === 1) {
							this.dataList = list
						} else {
							this.dataList = this.dataList.concat(list)
						}
					}
				})
			},
			open() {
				// console.log('open');
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss">
	.index-page {
		.app-name-adv {
			height: 76rpx;
			background-image: url('/static/imgs/mask_bg.png');
			background-size: 100%;
			background-repeat: no-repeat;
			background-position: center top;
		}

	}
</style>